<template>
	<!-- 左侧菜单栏开始 -->
	<el-container style="height: 100vh;" v-if="$route.path!=='/'">
		<el-aside width="200px" style="background-color: #545c64;">
			<h4 style="color: #fff; padding: 20px;">👖后台管理系统</h4>
			<el-menu
			active-text-color="#ffdo4b"
			background-color="#545c64"
			class="el-menu-vertical"
			default-active="/usermanagement"  
			text-color="#fff"
			@select="change"
			> <!--大的菜单对象--><!--change事件会返回index的值-->
			     <!--折叠对象开始-->
			    <el-sub-menu index="1">
			      <template #title>
			        <el-icon><location /></el-icon>
			        <span>用户管理</span>
			      </template>
			      <el-menu-item-group>
				
					<el-menu-item index="/usermanagement" >
					<el-icon><user></user></el-icon><!--图标-->
					<span>用户列表</span>
				</el-menu-item>
				<el-menu-item index="/userrootmanage" >
					<el-icon><bell-filled></bell-filled></el-icon>
					<span>权限管理</span>
				</el-menu-item>
			</el-menu-item-group>
			    </el-sub-menu>
				 <!--折叠对象结束-->
				 <!--折叠对象开始-->
				     <el-sub-menu index="2">
				       <template #title>
				         <el-icon><location /></el-icon>
				         <span>权限管理</span>
				       </template>
				       <el-menu-item-group>
				 	
				 		<el-menu-item index="2-1" >
				 		<el-icon><guide></guide></el-icon><!--图标-->
				 		<span>权限列表</span>
				 	</el-menu-item>
				 	<el-menu-item index="2-2" >
				 		<el-icon><van></van></el-icon><!--图标-->
				 		<span>路由列表</span>
				 	</el-menu-item>
				 </el-menu-item-group>
				     </el-sub-menu>
				 	 <!--折叠对象结束-->
			</el-menu>
		</el-aside>
		<!-- 右边主视图开始 -->
		<el-container>
			<el-header class="no-side-padding">
				<div class="custom-breadcrumb">
					<el-breadcrumb separator="/">
						<el-breadcrumb-item 
							v-for="(item, index) in $route.matched" 
							:key="index" 
							:to="{ path: item.path }"
						>
							{{ item.meta.title || item.name || '未命名' }}
						</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
				<!-- 我的下拉框 -->
				<el-dropdown @command="handleCommand" class="pull-right">
					<span class="el-dropdown-link">
						我的<i class="el-icon-arrow-down el-icon--right"></i>
					</span>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item command="profile">个人信息</el-dropdown-item>
							<el-dropdown-item command="logout">退出</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</el-header>
			<el-main>
				<router-view/>
			</el-main>
		</el-container>
		<!-- 右边主视图结束 -->
	</el-container>
	<!-- 当路由路径为 / 时显示 -->
	<router-view v-else />
	<!-- 新增弹窗组件 -->
	<el-dialog v-model="dialogVisible" title="个人信息">
		<p>用户名: {{ uname }}</p>
		<p>Token: {{ token }}</p>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogVisible = false">关闭</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script>
import {
  User, BellFilled, Guide, Van
} from '@element-plus/icons-vue' // 引入图标
export default {
  components: {
    User, BellFilled, Guide, Van
  },
  data() {
    return {
      dialogVisible: false,
      uname: '',
      token: ''
    }
  },
  created() {
  	this.uname=localStorage.getItem('uname')
	this.token=localStorage.getItem('token')
  },
  methods: {

    change(e) {
      this.$router.push(e)
    },
    handleCommand(command) {
      if (command === 'profile') {
        // 打开弹窗
        this.dialogVisible = true;
      } else if (command === 'logout') {
       localStorage.removeItem('uname'); // 清除用户名
       localStorage.removeItem('token'); // 清除 Token
       this.$router.push('/'); // 跳转到登录页
      }
    }
  }
}
</script>

<style scoped>
.custom-breadcrumb {
  border: 1px solid #e4e7ed; 
  background-color: #f5f7fa; 
  padding: 10px 15px; 
  border-radius: 4px; 
}

.no-side-padding {
  padding-left: 0;
  padding-right: 0;
}

.pull-right {
  float: right;
  margin-right: 15px;
  margin-top: -25px; 
}

.el-icon {
  margin-left: 0;
  padding-left: 0;
}

.el-menu {
  margin-left: 0;
  padding-left: 0;
}

.el-menu-item {
  margin-left: 0;
  padding-left: 0;
}

/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.el-menu {
  /* 确保菜单没有额外的外边距或内边距 */
  margin: 0;
  padding: 0;
  border: 0;
}
</style>
